<template>
  <div id="hotlist">
    <ul class="hot-nav">
      <li class="nav-focus"><span>热门</span></li>
      <li><span>最新</span></li>
    </ul>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    <el-skeleton :rows="6" animated v-if="loading" style="background-color:#fff;padding: 10px"/>
    <ul class="hots" v-else>
      <li class="hots-item" v-for="(item,index) in hotlist" :key="index">
        <div class="items-head">
          <img :src="item.icon || '/headicon.jpg'" alt="">
<<<<<<< HEAD

=======
=======
    <ul class="hots">
      <li class="hots-item" v-for="(item,index) in hotlist" :key="index">
        <div class="items-head">
          <img src="@/assets/img/headicon.jpg" alt="">
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
          <div class="headinfo">
            <p class="huname">{{ item.name }}</p>
            <p class="head-subinfo">
              <span v-for="(atag,index) in item.tags" :key="index">{{ atag }}</span>
              <span>{{ item.date }}</span>
            </p>
          </div>
        </div>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        <div class="items-content" v-if="typeof item.info=='object'" v-html="item.info.info"></div>
        <div class="items-content" v-else v-html="item.info"></div>
        <div class="item-img">
          <img :src="item.pic" alt="" v-if="item.pic===''">
          <img v-for="(imgs,index) in item.info.img" :key="index" :src="imgs" alt="">
<<<<<<< HEAD

=======
=======
        <div class="items-content">
          {{ item.info }}
          <div class="item-img">
            <img :src="item.pic" alt="">
          </div>
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        </div>
        <ul class="item-foot">
          <li>
            <i class="el-icon-share"></i>
            <span>分享</span>
          </li>
<<<<<<< HEAD
          <li @click="commenItemClick(item.articId)">
=======
<<<<<<< HEAD
          <li @click="commenItemClick(item.articId)">
=======
          <li>
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
            <i class="el-icon-chat-dot-square"></i>
            <span>{{ item.comments.length }}</span>
          </li>
          <li>
            <i class="el-icon-check"></i>
            <span>2</span>
          </li>
        </ul>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        <!--评论-->
        <div class="hot-comment" v-if="commentShow.outInput&&commentClicItemId===item.articId">
          <!--直接的一级评论框-->
          <div class="hcomment-one">
            <img src="/headicon.jpg" alt="">
            <input type="text" placeholder="输入评论" v-model="outcomment">
          </div>
          <div class="down-area">
            <ul class="leftarea">
              <li style="position: relative">
                <div class="mumu">
                  <el-col style="position: absolute;top:25px; z-index:10">
                    <VEmojiPicker v-show="showDialog" @select="selectEmoji"/>
                  </el-col>
                </div>
                <div class="emoji">
                  <span type="text" size="mini" @click="showDialog = !showDialog">😀表情</span>
                </div>
              </li>
              <li style="overflow: hidden;position: relative;">
                <i class="el-icon-picture-outline"></i>
                <span class="imgText">图片</span>
                <input
                    type="file"
                    class="img_upload"
                    accept="image/*"
                    @change="changeImg($event)"/>
              </li>
            </ul>
            <div class="rightarea">
              <span>Crtl + Enter</span>
              <button id="maBtn" :class="[inputHasWords?'hasWordsBtn':'focusBtn']" @click="outSendClick">发表评论</button>
            </div>
          </div>
          <!--评论内部-->
          <div class="qcomment-body">
            <h2>热门评论 🔥</h2>
            <!--一级评论-->
            <div class="loading" v-loading="allCommentsloading" v-if="allCommentsloading" ></div>
            <ul class="one-step"  v-else>
              <li class="one-head" v-for="(item,index) in commentItemInfo" :key="index">
                <div class="one-head-img">
                  <img :src="item.icon||'/headicon.jpg'" alt="一级评论头像">
                </div>
                <div class="one-right-msg">
                  <div class="user-msg">
                    <span>{{ item.nick_name }}</span>
                    <span class="msg-light" style="margin: 0 8px;">|</span>
                    <span class="msg-light">{{ item.created_at }}</span>
                  </div>
                  <div class="comment-content">
                    <p>{{ item.comment_info.text }}</p>
                  </div>
                  <div class="comment-icon">
                    <span>赞 1</span>
                    <span class="callback" @click="commenItemClick1(item.comment_id)">回复 {{item.child.length}}</span>
                  </div>
                  <!--一级评论框-->
                  <div class="one-child-comment" v-if="commentShow.oneComment&&commentClicItemId1===item.comment_id">
                    <input type="text" placeholder="输入评论" v-model="onecomment">
                    <div class="down-area">
                      <ul class="leftarea">
                        <li style="position: relative">
                          <div class="mumu">
                            <el-col style="position: absolute;top:45px; z-index:10">
                              <VEmojiPicker v-show="showDialog1" @select="selectEmoji1"/>
                            </el-col>
                          </div>
                          <div class="emoji">
                            <span type="text" size="mini" @click="showDialog1 = !showDialog1">😀表情</span>
                          </div>
                        </li>
                        <li style="overflow: hidden;position: relative;">
                          <i class="el-icon-picture-outline"></i>
                          <span class="imgText">图片</span>
                          <input
                              type="file"
                              class="img_upload"
                              accept="image/*"
                              @change="changeImg($event)"/>
                        </li>
                      </ul>
                      <div class="rightarea">
                        <span>Crtl + Enter</span>
                        <button @click="oneSendClick(item.comment_id)">发表评论</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!--二级评论内容-->
                <ul class="two-step">
                  <li v-for="(twocomment,i) in item.children" :key="i">
                    <div class="two-head-img">
                      <img src="/headicon.jpg" alt="一级评论头像">
                    </div>
                    <div class="two-right-msg">
                      <div class="user-msg">
                        <span>{{ twocomment.nick_name }}</span>
                        <span class="msg-light" style="margin: 0 8px;">|</span>
                        <span class="msg-light">{{ twocomment.created_at }}</span>
                      </div>
                      <div class="comment-content">
                        <p>{{ twocomment.comment_info.text }}？</p>
                      </div>
                      <div class="comment-icon">
                        <span>赞 1</span>
                        <span @click="commenItemClick2(twocomment.comment_id)">回复 {{twocomment.length}}</span>
                      </div>
                    </div>
                    <!--二级评论的回复框-->
                    <div class="one-child-comment two-child" v-if="commentShow.twoComment&&commentClicItemId2===twocomment.comment_id">
                      <input type="text" placeholder="输入评论" v-model="twocomments">
                      <div class="down-area">
                        <ul class="leftarea">
                          <li style="position: relative">
                            <div class="mumu">
                              <el-col style="position: absolute;top:45px; z-index:10">
                                <VEmojiPicker v-show="showDialog2" @select="selectEmoji2"/>
                              </el-col>
                            </div>
                            <div class="emoji">
                              <span type="text" size="mini" @click="showDialog2 = !showDialog2">😀表情</span>
                            </div>
                          </li>
                          <li style="overflow: hidden;position: relative;">
                            <i class="el-icon-picture-outline"></i>
                            <span class="imgText">图片</span>
                            <input
                                type="file"
                                class="img_upload"
                                accept="image/*"
                                @change="changeImg($event)"/>
                          </li>
                        </ul>
                        <div class="rightarea">
                          <span>Crtl + Enter</span>
                          <button @click="twoSendClick(twocomment.comment_id)">发表评论</button>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
<<<<<<< HEAD
=======
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      </li>
    </ul>
  </div>
</template>

<script>
import {allUse} from "../../requests/apis";
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
import {VEmojiPicker} from "v-emoji-picker";

export default {
  name: "hotList",
  components: {
    VEmojiPicker
  },
  data() {
    return {
      inputHasWords: false,
      hotlist: [],
      sum: 1,
      loading: true,
      showDialog: false,
      showDialog1: false,
      showDialog2: false,
      outcomment:'',
      onecomment: '',
      twocomments:'',
      commentShow:{
        outInput:false,
        oneComment:false,
        twoComment:false
      },
      commentClicItemId:'',
      commentClicItemId1:'',
      commentClicItemId2:'',
      commentItemInfo:[],
      allCommentsloading:true,
      allDataLoad:false
    };
  },
  methods: {
    //所有的沸点都只用一个评论框,依靠点击时传入的id值判断具体显示在哪一个沸点下,内部的回复框同理
    outSendClick(){
      let sendMsg = {
        text:this.outcomment,
        img:[]
      }
      this.sendOneComments(JSON.stringify(sendMsg),this.commentClicItemId)
    },
    oneSendClick(fatherId){
      let sendMsg = {
        text:this.onecomment,
        img:[]
      }
      this.sendTwoComments(JSON.stringify(sendMsg),this.commentClicItemId,fatherId)
    },
    twoSendClick(fatherId){
      let sendMsg = {
        text:this.twocomments,
        img:[]
      }
      this.sendTwoComments(JSON.stringify(sendMsg),this.commentClicItemId,fatherId)
    },
    commenItemClick(clickHotId){
      this.commentItemInfo = []
      this.commentClicItemId = clickHotId
      this.commentShow.outInput = !this.commentShow.outInput
      if(this.commentShow.outInput === true){
        this.getOneStepComments(clickHotId).then(res=>{
          this.commentItemInfo = res.data.data.data
          for(let i=0;i<this.commentItemInfo.length;i++){
            this.commentItemInfo[i].comment_info = JSON.parse(this.commentItemInfo[i].comment_info)
            this.commentItemInfo[i].created_at = this.$transDate(this.commentItemInfo[i].created_at)
            this.getTwoStepComments(clickHotId,this.commentItemInfo[i].comment_id).then(secondData=>{
              this.commentItemInfo[i].children = []
              console.log(secondData.data.data.data)
              this.commentItemInfo[i].children=secondData.data.data.data
              this.commentItemInfo[i].children.forEach(element=>{
                element.created_at = this.$transDate(element.created_at)
                element.comment_info = JSON.parse(element.comment_info)
              })
              this.allCommentsloading = false
              if(i === this.commentItemInfo.length-1){
                this.allDataLoad = true
                this.$forceUpdate()
              }
            })
          }
        })
      }

    },
    commenItemClick1(id){
      this.commentClicItemId1 = id
      this.commentShow.oneComment = !this.commentShow.oneComment
    },
    commenItemClick2(id){
      this.commentClicItemId2 = id
      this.commentShow.twoComment = !this.commentShow.twoComment
    },
    selectEmoji(emoji) {
      this.outcomment += emoji.data
    },
    selectEmoji1(emoji) {
      this.onecomment+= emoji.data
    },
    selectEmoji2(emoji) {
      this.twocomments += emoji.data
    },
    getOneStepComments(articId){
      return allUse('/api/articleInfo','post',{
        article_id:articId,
        page:1,
        size:10
      })
    },
    getTwoStepComments(articId,fatherId){
      return allUse('/api/articleInfo','post',{
        article_id:articId,
        page:1,
        size:10,
        father_id:fatherId
      })
    },
    sendOneComments(message,articId){
       allUse('/api/addComment','post',{
        token:this.$getSession().token,
        comment_info:message,
        article_id:articId
      }).then(res=>{
         if(res.data.code === 2000){
           this.$message({
             type:'success',
             message:'评论发表成功'
           })
         }
         this.outcomment = ''
         this.commentClicItemId = articId
         this.commentShow.outInput = true
         this.commenItemClick(articId)
       })
    },
    sendTwoComments(message,articId,fatherId){
      this.allCommentsloading = true
      allUse('/api/addComment','post',{
        token:this.$getSession().token,
        comment_info:message,
        article_id:articId,
        father_id:fatherId
      }).then(res=>{
        console.log(res)
        if(res.data.code === 2000){
          this.$message({
            type:'success',
            message:'评论发表成功'
          })
        }
        this.onecomment = ''
        this.twocomments = ''
        this.commentClicItemId1 = fatherId
        this.commentClicItemId = articId
        this.commentShow.outInput = true
        this.commenItemClick(articId)
      })
    },
    getHotData() {
      allUse('/api/articleList', 'post', {
        type: 2,
        page: this.sum,
        size: 10
      }).then(res => {
        this.loading = false
<<<<<<< HEAD
=======
=======

export default {
  name: "hotList",
  data() {
    return {
      hotlist: [],
      sum:1
    };
  },
  methods: {
    getHotData(){
      allUse('/api/articleList', 'post', {
        type: 2,
        page:this.sum,
        size:10
      }).then(res => {
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        let allinfo = res.data.data.data
        for (let i = 0; i < allinfo.length; i++) {
          let ainfo = {}
          ainfo.comments = []
          ainfo.tags = []
<<<<<<< HEAD

=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
          if (allinfo[i].info === null) {
            ainfo.info = ''
          } else {
            ainfo.info = this.$isJson(allinfo[i].info) ? JSON.parse(allinfo[i].info) : allinfo[i].info
          }
<<<<<<< HEAD

=======
=======
          ainfo.info = allinfo[i].info
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
          ainfo.name = allinfo[i].nick_name || `用户${allinfo[i].user_id}`
          ainfo.pic = allinfo[i].pic
          ainfo.date = this.$transDate(allinfo[i].updated_at)
          ainfo.userid = allinfo[i].user_id
<<<<<<< HEAD
          ainfo.icon = allinfo[i].icon
          ainfo.articId = allinfo[i].article_id
=======
<<<<<<< HEAD
          ainfo.icon = allinfo[i].icon
          ainfo.articId = allinfo[i].article_id
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
          for (let j = 0; j < allinfo[i].comment.length; j++) {
            ainfo.comments.push({
              comm_name: allinfo[i].comment[j].nick_name || `用户${allinfo[i].comment[j].user_id}`,
              comm_info: allinfo[i].comment[j].comment_info
            })
          }
          for (let k = 0; k < allinfo[i].tags.length; k++) {
            ainfo.tags.push(allinfo[i].tags[k].tag_name)
          }
          this.hotlist.push(ainfo)
        }
      })
    },
    debounce(func, wait, mustRun) {
<<<<<<< HEAD
      var timeout, startTime = new Date();
=======
<<<<<<< HEAD
      var timeout, startTime = new Date();
=======
      var timeout,
          startTime = new Date();

>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      return function () {
        let context = this,
            args = arguments,
            curTime = new Date();
<<<<<<< HEAD
=======
<<<<<<< HEAD
=======

>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= mustRun) {
          func.apply(context, args);
          startTime = curTime;
          // 没达到触发间隔，重新设定定时器
        } else {
          timeout = setTimeout(func, wait);
        }
      }
    },
    rollfun() {
      // 滑动的高度
      let scrollTop = document.documentElement.scrollTop;
      // 当前高度
      let clientHeight = document.documentElement.clientHeight;
      // 页面总高度
      let scrollHeight = document.body.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        this.sum += 1
        this.getHotData();
      }
    }
  },
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
  watch: {
    "onecomment"(val) {
      if (val !== '') {
        this.inputHasWords = true
      } else {
        this.inputHasWords = false
      }
    }
  },
  mounted() {
    this.getHotData()
    window.addEventListener('scroll', this.debounce(this.rollfun, 500, 500))
<<<<<<< HEAD
=======
=======
  mounted() {
    this.getHotData()
    window.addEventListener('scroll',this.debounce(this.rollfun,500,500))
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
  }
}
</script>

<style>
#hotlist {
  width: 720px;
  margin-top: 20px;
}

.hot-nav {
  display: flex;
}

.hot-nav li {
  margin: 0 15px 25px 10px;
  cursor: pointer;
  position: relative;
}

.hot-nav li:hover {
  color: #1E80FF;
}

.hot-nav .nav-focus {
  color: #1E80FF;
}

.hot-nav .nav-focus::after {
  display: block;
  content: '';
  width: 70%;
  height: 3px;
  background-color: #1E80FF;
  position: absolute;
  bottom: -10px;
  left: 15%;
}

.hots-item {
  width: calc(100% - 40px);
  background-color: #ffffff;
  border-radius: 3px;
  padding: 20px 20px 0 20px;
  position: relative;
}

.hots-item:not(:first-child) {
  margin-top: 20px;
}

.items-head {
  display: flex;
}

.items-head img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.headinfo {
  margin-left: 20px;
}

.huname {
  font-weight: 500;
  font-size: 16px;
  color: #252933;
  line-height: 28px;
}

.head-subinfo {
  color: #909090;
}

.head-subinfo span {
  margin-right: 12px;
  margin-top: 5px;
}

.items-content {
  padding: 20px 0 10px 68px;
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
  font-size: 16px;
  color: #17181a;
  line-height: 26px;
  word-break: break-all;
<<<<<<< HEAD
=======
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
}

.item-img {
  padding: 15px 0;
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
  display: flex;
  flex-wrap: wrap;
}

.item-img img {
  width: 40%;
  height: auto;
  margin: 0 10px 10px 0;
<<<<<<< HEAD

=======
=======
  max-width: 85%;
}
.item-img img{
  width: 100%;
  height: auto;
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
}

.item-foot {
  display: flex;
}

.item-foot::before {
  content: '';
  display: block;
  width: 95%;
  height: 1px;
  background-color: #E4E6EB;
  position: absolute;
}

.item-foot li {
  width: 33%;
  height: 45px;
  text-align: center;
  line-height: 45px;
  position: relative;
  cursor: pointer;
}

.item-foot li:not(:last-child)::after {
  content: '';
  display: block;
  width: 1px;
  height: 40%;
  background-color: #E4E6EB;
  position: absolute;
  right: 0;
  top: 30%;
}

.item-foot li i, .item-foot li span {
  color: #86909c;
  margin: 0 2px;
}

.item-foot li:hover i, .item-foot li:hover span {
  color: #1E80FF;
}

<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
.hot-comment {
  background-color: #FCFCFC;
  padding-left: 10px;
}

.hot-comment::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #E4E6EB;
}

.hcomment-one {
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hcomment-one img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.hcomment-one input {
  height: 35px;
  width: calc(100% - 55px);
  text-indent: 1em;
  color: #1d2129;
  font-size: 14px;
  outline: none;
  background-color: #F4F5F5;
  border: 1px solid #FCFCFC;
}

.hcomment-one input:focus {
  border: 1px solid #1E80FF;
  background-color: #ffffff;
}

.down-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
  margin-top: -13px;
}

.down-area .leftarea {
  width: 120px;
  font-size: 14px;
  color: #4e5969;
  padding-left: 40px;
  display: flex;
  justify-content: space-between;
}

.leftarea li:hover {
  color: #1E80FF;
}

.leftarea span {
  cursor: pointer;
  /*visibility: hidden;*/
}

.leftarea span:hover {
  color: #1E80FF;
}

.leftarea span:last-child {
  margin-left: 15px;
}

.rightarea span {
  font-size: 14px;
  margin-right: 10px;
  color: #86909c;
  font-size: 16px;
  visibility: hidden;
}

.rightarea button {
  width: 92px;
  height: 36px;
  border: none;
  background-color: #c9cdd4;
  color: #fff;
  cursor: pointer;
}

.rightarea .focusBtn {
  background-color: #ABCDFF;
}

.rightarea .hasWordsBtn {
  background-color: #1E80FF;
}

.down-area span {
  visibility: visible;
}

.img_upload {
  position: absolute;
  left: 0;
  opacity: 0;
}

.qcomment-body {
  padding-bottom: 25px;
}

.qcomment-body::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #E5E6EB;
}

.qcomment-body h2 {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
  padding-top: 25px;
  padding-left: 18px;
}

.one-head {
  margin-left: 15px;
  /* display: flex; */
  position: relative;
  padding: 15px 0;
}

.one-head:not(:last-child)::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background-color: #E5E6EB;
  position: absolute;
  bottom: 0px;
}

.one-head .one-head-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-top: 5px;
}

.one-head .one-head-img img {
  width: 100%;
  height: 100%;
}

.one-head .one-right-msg {
  display: flex;
  flex-direction: column;
  margin-left: 50px;
}

.one-head .one-right-msg div {
  margin-bottom: 10px;
}

.user-msg {
  font-size: 14px;
  color: #1d2129;
}

.user-msg .msg-light {
  color: #86909c;
}

.comment-content {
  font-size: 14px;
  color: #4e5969;
}

.comment-icon {
  color: #4e5969;
  font-size: 12px;
  cursor: pointer;
}

.comment-icon span:hover {
  color: #1E80FF;
}

.comment-icon span:first-child {
  margin-right: 10px;
}

.one-head ul {
  background-color: #F7F8FA;
  padding: 10px;
  margin-left: 45px;
}

.one-head ul li {
  position: relative;
  padding-top: 10px;
}

.one-head ul li:not(:last-child)::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background-color: #E5E6EB;
  position: absolute;
  bottom: 0px;
}

/* 二级评论样式 */
.two-head-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-top: 5px;
}

.two-head-img img {
  width: 100%;
  height: 100%;
}

.two-right-msg {
  display: flex;
  flex-direction: column;
  margin-left: 50px;
}

.two-right-msg div {
  margin-bottom: 10px;
}

.two-right-msg .user-msg {
  font-size: 14px;
  color: #1d2129;
}

.two-right-msg .user-msg .msg-light {
  color: #86909c;
}

.two-right-msg .comment-content {
  font-size: 14px;
  color: #4e5969;
}

.two-right-msg .comment-icon {
  color: #4e5969;
  font-size: 12px;
  cursor: pointer;
}

.two-right-msg .comment-icon span:first-child {
  margin-right: 10px;
}


.one-child-comment {
  background-color: #F7F8FA;
  padding: 10px 10px 0 10px;
}

.one-child-comment input{
  width: 98%;
  min-height: 10px;
  background-color: #F4F5F5;
  border: 1px solid #F4F5F5;
  outline: none;
  text-indent: 1em;
  resize: none;
  font-size: 14px;
  padding: 10px 0;
  font-family: sans-serif;
  overflow: hidden;
}
.one-child-comment input:focus{
  border: 1px solid #1E80FF;
  background-color: #fff;
}

.one-child-comment .down-area{
  height: 15px;
  margin-top: 15px;
  display: flex;
  align-items: center;
}
.one-child-comment .down-area .leftarea {
  display: flex;
  height: auto;
  align-items: center;
  margin-left: 0;
  padding: 0;
  height: 10px;
}
.one-child-comment .down-area .rightarea{
  margin: 20px 10px 0 0;
}

.up-area textarea {
  width: 650px;
  min-height: 55px;
  background-color: #F4F5F5;
  border: 1px solid #fff;
  outline: none;
  text-indent: 1em;
  resize: none;
  font-size: 14px;
  padding: 10px 0;
  font-family: sans-serif;
  overflow: hidden;
}
.two-child{
  background-color: #fff;
}
.loading{
  margin-top: 40px;
}
<<<<<<< HEAD
=======
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
</style>